<section type="security-requirements" label="SECURITY REQUIREMENTS"
         [counterItems]="securityRequirements()"
         [collaborationNodePath]="securityRequirementsPath()"
         [contextHelp]="contextHelp()" [validationModels]="securityRequirements()">
    <span actions>
        <icon-button (onClick)="openSecurityRequirementEditor()" [pullRight]="true" type="add"
                     [title]="global ? 'Add a security requirement to the API.' : 'Add a security requirement for the operation.'"></icon-button>
        <icon-button (onClick)="deleteAllSecurityRequirements()" [disabled]="!hasSecurityRequirements()"
                     [pullRight]="true" type="delete"
                     title="Delete all security requirements."></icon-button>
    </span>
    <div body>
        <signpost *ngIf="!hasSecurityRequirements()">
            <span>No security requirements have been configured.</span>
            <a (click)="openSecurityRequirementEditor()">Add security requirement</a>
        </signpost>

        <div *ngIf="hasSecurityRequirements()">
            <div *ngIf="global" class="api-label">Security Requirements needed to access <strong>Operations in this API</strong> (clients must choose one combination):</div>
            <div *ngIf="!global" class="api-label">Security Requirements needed to access <strong>this Operation</strong> (clients must choose one combination):</div>
            <div class="security-requirement" *ngFor="let requirement of securityRequirements()">
                <div class="name">
                    <validation-problem [model]="requirement" [shallow]="true"></validation-problem>
                    <span class="fa fa-lock fa-fw" *ngIf="!isAnonSecurity(requirement)"></span>
                    <span class="fa fa-unlock fa-fw" *ngIf="isAnonSecurity(requirement)"></span>
                    <span class="requirement-label" *ngIf="!isAnonSecurity(requirement)">{{ requirement.getSecurityRequirementNames().join(", ") }}</span>
                    <span class="requirement-label no-security" *ngIf="isAnonSecurity(requirement)">No Security</span>
                </div>
                <div class="actions">
                    <div class="dropdown dropdown-kebab-pf">
                        <button class="btn btn-link dropdown-toggle" type="button" (click)="$event.preventDefault()"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <span class="fa fa-ellipsis-v"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a (click)="openSecurityRequirementEditor(requirement)"><span class="fa fa-fw fa-pencil-square-o"></span><span>Edit</span></a></li>
                            <li role="separator" class="divider"></li>
                            <li><a (click)="deleteSecurityRequirement(requirement)"><span class="fa fa-fw fa-trash"></span><span>Delete</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
